/** 三栏布局 */
import {StyleSheet, View, TouchableOpacity} from 'react-native';
import {BindItem} from '../mobx/home';
import {ImgText} from './ImgText';
import {Img} from './Img';
import {ObserverText} from './ObserverText';
import {contextStatus, dight} from '../utils';
import {
  dpmain,
  dpw10,
  dpw12,
  dpw122,
  dpw129_5,
  dpw132,
  dpw150,
  dpw154,
  dpw220,
  dpw24,
  dpw240,
  dpw4,
  dpw8,
} from '../constants';
import {ImgText2} from './ImgText2';
import {observer} from 'mobx-react-lite';
import {useUserInfoStore} from '../mobx';

interface GridThreeProps {
  list: BindItem[];
  type: number;
  itemWidth?: any;
  itemHeight?: any;
  imgHeight?: any;
}

export const GridThree = observer(
  (props: GridThreeProps & {navigation?: any}) => {
    const {
      list,
      type,
      navigation,
      itemWidth = dpw129_5,
      itemHeight = dpw220,
    } = props;
    const {userInfo} = useUserInfoStore();

    // 详情页
    const toDetail = (info?: BindItem) => {
      if (navigation) {
        if (!userInfo?.Token) {
          navigation.navigate('Login');
        } else {
          navigation.navigate('cartoon-detail', {bId: info?.BID});
        }
      }
    };

    const getChildren = (info: BindItem & {idx: number}) => {
      if (type === 1) {
        return <ImgText {...info} toDetail={toDetail} />;
      }
      if (type === 2) {
        return <ImgText2 {...info} toDetail={toDetail} />;
      }
      return null;
    };

    return (
      <View style={styles.box}>
        {Array.isArray(list)
          ? list.map((it, idx) => (
              <View
                key={it.BID + 'id' + idx || idx}
                style={[
                  styles.itemThree,
                  {width: itemWidth, height: itemHeight},
                ]}>
                {getChildren({...it, idx})}
              </View>
            ))
          : null}
      </View>
    );
  },
);

// 一列
export const GridOne = observer(
  (
    props: Omit<GridThreeProps, 'type'> & {typeId?: number; navigation?: any},
  ) => {
    const {list, typeId = 1, navigation} = props;
    const {userInfo} = useUserInfoStore();

    // 详情页
    const toDetail = (info?: BindItem) => {
      if (navigation) {
        if (!userInfo?.Token) {
          navigation.navigate('Login');
        } else {
          navigation.navigate('cartoon-detail', {bId: info?.BID});
        }
      }
    };

    return (
      <View style={styles.box}>
        {Array.isArray(list)
          ? list.map((it, idx) => (
              <TouchableOpacity
                key={it.BID || idx}
                style={styles.itemOne}
                onPress={() => toDetail(it)}>
                <Img url={it.ExtensionUrl} style={styles.itemOneImg} />
                <View style={styles.titleBox}>
                  <ObserverText
                    style={{flex: 1}}
                    tKey={it.Title}
                    type="card-title"
                    numberOfLines={1}
                    ellipsizeMode="tail"
                  />
                  <ObserverText
                    style={{marginLeft: dpw12}}
                    tKey="hotNum"
                    tOptions={{number: dight(it.ReadCount)}}
                    type="desc"
                  />
                </View>
                {it.Status && typeId && (
                  <ObserverText
                    {...contextStatus({...it, Type: typeId})}
                    type="desc"
                  />
                )}
                <ObserverText
                  tKey={it.Description}
                  type="desc"
                  numberOfLines={2}
                  ellipsizeMode="tail"
                  style={styles.desc}
                />
              </TouchableOpacity>
            ))
          : null}
      </View>
    );
  },
);

const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  itemThree: {
    paddingHorizontal: dpw4,
    marginBottom: dpw12,
  },
  itemOne: {
    width: dpmain,
    marginBottom: dpw12,
    marginHorizontal: 'auto',
  },
  itemOneImg: {
    width: dpmain,
    height: dpw154,
    borderRadius: dpw8,
    marginBottom: dpw8,
  },
  titleBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    overflow: 'hidden',
  },
  desc: {
    marginTop: dpw4,
  },
});
